<template>
	<view class="page">
		<topVue title="品牌区"></topVue>
		<view class="rightClick flex align-center" @click="navigate('./shopcar')">
			<image src="../../static/shop_car.png" style="width: 42rpx; height: 42rpx;"></image>
		</view>
		
		<!-- banner -->
		<!-- <view class="bannerVue margin0 padding30">
			<text>消费积分</text>
			<view class="value">2580</view>
			<text>注意：积分区商品仅支持消费积分兑换</text>
		</view>
		
		<view class="w100 flex-between padding-row30 margin30">
			<view class="menu padding30 flex-column flex-between">
				<image src="../../static/index/list-ol.png" style="width: 42rpx; height: 42rpx;"></image>
				<view class="label">活动任务</view>
				<text>赚取更多积分</text>
			</view>
			<view class="menu padding30 flex-column flex-between">
				<image src="../../static/index/record.png" style="width: 42rpx; height: 42rpx;"></image>
				<view class="label">积分明细</view>
				<text>查看积分记录</text>
			</view>
		</view>
		 -->
		<!-- 搜索 -->
		<view class="searchVue flex align-center relative margin30">
			<input type="text" placeholder="搜索兑换商品" placeholder-style="color: #9CA3AF"/>
			<image src="../../static/search.png" style="width: 38rpx; height: 38rpx; left: 50rpx;" class="absolute-middle"></image>
		</view>
		
		<!-- 商品类型切换 -->
		<view class="tabVue margin30">
			<scroll-view scroll-x="true" class="scrollVue">
				<view 
					class="tab" 
					v-for="(item, index) in tabs" :key="index" 
					:class="{active: current===index}"
					@click="current=index"
				>{{ item.name}}</view>				
			</scroll-view>
		</view>
		
		<!-- 产品列表 -->
		<view class="productVue flex-wrap flex-between">
			<view class="product" v-for="(item, index) in 11" :key="index" @click="navigate('./productDetail')">
				<view class="picture relative">
					<!-- <image src="../../static/post.jpg" style="width: 100%; height: 100%;"></image> -->
				</view>
				<view class="info padding20 flex-column flex-between">
					<view class="name line-1">华为mate80 pro</view>
					<view class="flex align-center">
						<image src="../../static/index/point.png" style="width: 34rpx; height: 34rpx;"></image>
						<text class="pointPrice">2028积分</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				tabs: [{ name: '全部' }, { name: '待付款' }, { name: '待评价'}, { name: '待评价'}, { name: '待评价'}, { name: '待评价'}, { name: '待评价'}],
				current: 0
			}
		},
		methods: {
			// 登录校验跳转
			navigate(path, value){
				if(!this.$store.state.isLogin) return this.$tools.route("../login/login")
				uni.navigateTo({
					url: path + "?value=" + value
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.bannerVue {
		width: 690rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
		border-radius: 18rpx;
		text {
			color: #fff;
			line-height: 1;
			font-size: 26rpx;
			opacity: 0.7;
		}
		.value {
			color: #fff;
			font-weight: 600;
			line-height: 1;
			font-size: 42rpx;
			padding: 20rpx 0;
		}
	}
	
	.menu {
		width: 330rpx;
		height: 200rpx;
		background: #fff;
		border-radius: 18rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.label {
			font-weight: 600;
			line-height: 1;
		}
		text {
			color: #6B7280;
			font-size: 26rpx;
			line-height: 1;
		}
	}
	
	.searchVue {
		width: 100%;
		height: 78rpx;
		padding: 0 30rpx;
		input {
			width: 100%;
			height: 78rpx;
			background: #fff;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			border-radius: 36rpx;
			color: #333;
			font-size: 28rpx;
			padding-left: 64rpx;
		}
	}
	
	.tabVue {
		width: 100%;
		height: 66rpx;
		padding: 0 30rpx;
		.scrollVue {
			width: 100%;
			height: 66rpx;
			box-sizing: border-box;
			white-space: nowrap; 
			.tab {
				width: 150rpx;
				height: 66rpx;
				background: #F3F4F6;
				display: inline-block;
				border-radius: 30rpx;
				color: #4B5563;
				line-height: 66rpx;
				text-align: center;
				margin-right: 20rpx;
			}
			.tab:nth-last-child(1) {
				margin-right: 0;
			}
			.active {
				background: linear-gradient(to right, #1CC289, #60A5FA);
				color: #fff;
			}
		}
	}
	
	.productVue {
		width: 100%;
		padding: 30rpx 30rpx 0;
		.product {
			width: 330rpx;
			height: 450rpx;
			margin-bottom: 30rpx;
			background: #fff;
			border-radius: 15rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			.picture {
				width: 330rpx;
				height: 330rpx;
				background: #f5f5f5;
			}
			.name {
				color: #333;
				font-weight: 600;
				line-height: 1;
			}
			.pointPrice {
				color: #1CC289; 
				line-height: 1;
				padding-left: 6rpx;
			}
			.info {
				width: 100%;
				height: 120rpx;
			}
		}
	}
</style>